<template>
  <div class="container">
    <template v-if="loaded">
      <navbar fixed="true" title="商品详情" theme="transparent"
              :showTitle="scrollOffsetY < 0"
              rightItemIcon="true"
              :rightHidden="true"
              :scrollOffsetY="scrollOffsetY">
        <template slot="rightItemIcon">&#xe8c4;</template>
      </navbar>
      <list @scroll="onPageScroll">
        <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                      :indicatorScale="indicatorScale"></page-refresh>
        <cell>
          <slider ref="topNode" class="item-img-slider" interval="3000" auto-play="true">
            <div v-for="img in item.imgList" v-bind:key="img" class="item-pic">
              <image resize="cover" class="item-pic" :src="img"></image>
            </div>
            <indicator class="item-img-slider-indicator"></indicator>
          </slider>
        </cell>
        <cell>
          <div class="panel bg-white">
            <div class="panel-body">
              <div class="item-title">
                <image :src="item.$_platformIcon" class="item-title-icon"></image>
                <text class="item-title-text">     {{item.title}}</text>
              </div>
              <div class="item-detail-row">
                <div class="item-price">
                  <text class="item-price-y">¥</text>
                  <text class="item-price-val">{{item.price.toFixed(2)}}</text>
                </div>
                <div class="remain-num">
                  <text class="remain-num-title">剩余</text>
                  <text class="remain-num-value">{{item.remainNum}}/{{item.totalNum}}</text>
                </div>
              </div>
            </div>
            <div class="panel-body item-detail-row bg-muted">
              <text class="item-sale-price">下单价{{item.originPrice.toFixed(2)}}元</text>
              <text class="item-rebate">返现{{item.rebateFee.toFixed(2)}}元</text>
              <text class="item-zk">折扣{{(item.price * 10 / item.originPrice).toFixed(1)}}</text>
            </div>
            <div class="panel-body item-detail-row bg-white">
              <div class="flex-row align-flex-end">
                <text class="item-guarantee-fee">商家已存入担保金</text><text class="item-guarantee-fee-value">{{item.guaranteeFee}}</text><text class="item-guarantee-fee">元，请放心购买！</text>
              </div>
            </div>
          </div>
        </cell>
        <cell>
          <div class="item-desc-cell" @click="buyerReadClick">
            <text class="item-desc-title">买家必读</text>
            <text class="item-desc-arrow icon">&#xe601;</text>
          </div>
        </cell>
        <cell>
          <div class="panel bg-white">
            <div class="panel-body">
              <text class="box-title">默认快递：</text>
              <text class="box-content">{{item.logisticsCompany}}</text>
              <text class="box-title">温馨提示：</text>
              <text class="box-content">请不要使用花呗、信用卡、淘宝客（返利网）、淘金币、店铺优惠券、京豆、分期付款下单！</text>
              <text class="box-title">商品详情：</text>
              <text class="box-content">{{item.description}}</text>
            </div>
          </div>
        </cell>
        <cell>

        </cell>
      </list>
      <div class="footerbar">
        <text :class="['icon', 'footerbar-btn', 'activeable', 'footerbar-btn-favor']" v-if="!favor" @click="toggleFavor">&#xe64c;</text>
        <text :class="['icon', 'footerbar-btn', 'activeable', 'footerbar-btn-favor', 'favor-highlight']" v-if="favor"
              @click="toggleFavor">&#xe64b;</text>
        <div class="footerbar-btn bg-muted" v-if="item.remainSeconds > 0">
          <time-countdown :seconds.sync="item.remainSeconds" v-if="item.remainSeconds > 0"></time-countdown>
        </div>
        <div v-if="item.remainSeconds <= 0" :class="['footerbar-btn', 'buy-btn', 'activeable',(!fillTradeNo && itemLocked) && 'btn-locked']" @click="goToBuy">
          <text :class="['icon', 'footerbar-btn-icon', (!fillTradeNo && itemLocked) && 'text-locked']">&#xe633;</text>
          <text :class="['footerbar-btn-text', (!fillTradeNo && itemLocked) && 'text-locked']"> {{fillTradeNo ? '填写单号' : (itemLocked ? '已抢购' : '我要抢购')}}</text>
        </div>
      </div>
      <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop" :bottom="130"></page-scrolltop>
    </template>
    <page-loading :loaded="loaded"></page-loading>
  </div>
</template>
<script>
import {WxcPopup} from 'weex-ui'
let navigator = require('./include/xnavigator')
let queryparser = require('./include/queryparser')
let api = require('./include/api')
var modal = weex.requireModule('modal')
let urlPath = require('./include/url-path')
let userLevel = require('./include/user-level')
let config = require('./include/app-config')
require('./include/page-xdom')
module.exports = {
  mixins: [
    require('./mixin/page-refresh'),
    require('./mixin/page-scrolltop'),
    require('./mixin/page-loading')
  ],
  components: {
    navbar: require('./components/navbar.vue'),
    coupon: require('./components/coupon.vue'),
    WxcPopup,
    'time-countdown': require('./components/time-countdown.vue')
  },
  data () {
    return {
      iosShow: false,
      refreshing: false,
      refreshIndicatorScale: 0.2,
      item: {},
      id: 0,
      sorryIcon: urlPath.assets('images/aiya.png'),
      scrollOffsetY: 0,
      favor: false,
      userLocked: true,
      itemLocked: true,
      fillTradeNo: false,
      login: false
    }
  },
  destroyed () {

  },
  created () {
    config.bindConfig(this)
    let cfg = this.$getConfig()
    let param = queryparser(cfg.bundleUrl)
    this.id = param.id || ''
    this.loadData().always(() => {
      this.loaded = true
    })
  },
  methods: {
    loadData () {
      return api.page.sellerPromotionItem.data({
        id: this.id
      }).done(rs => {
        let data = rs.data
        this.item = data.item
        this.favor = data.favor
        this.login = data.login
        this.itemLocked = data.itemLocked
        this.fillTradeNo = data.fillTradeNo
        this.id = this.item.id || ''
        this.item.$_platformIcon = urlPath.assets('images/icon/platform/' + this.item.ecomPlat + '.png')
      })
    },
    favorClick () {
      this.favor = !this.favor
    },
    onXRefresh (event) {
      this.onRefresh(event, this.loadData())
    },
    toggleFavor () {
      api.footmark.favor({
        id: this.id
      }).done(rs => {
        let flag = rs.data
        if (flag) {
          this.favor = true
        } else {
          this.favor = false
        }
      })
    },
    gotoTop () {
      let dom = weex.requireModule('dom')
      dom.scrollToElement(this.$refs.topNode)
    },
    onPageScroll (event) {
      this.scrollOffsetY = event.contentOffset.y
      this.onPageScrollForScrollTop(event)
    },
    goToBuy () {
      if (!this.fillTradeNo && this.itemLocked) {
        return
      }
      if (this.fillTradeNo) {
        navigator.push('sp-item-search-buy.js?id=' + this.id)
        return
      }
      userLevel.checkPlus().done(() => {
        api.sellerPromotionItem.rushBuy({
          sellerPromotionItemId: this.id
        }).done(rs => {
          if (rs.data) {
            modal.confirm({
              message: '抢购成功，请在45分钟内去下单付款并返回填写订单号，否则将自动取消本次抢购资格！',
              okTitle: '去下单',
              cancelTitle: '继续抢购',
              duration: 0.3
            }, value => {
              if (value === '去下单') {
                navigator.push('sp-item-search-buy.js?id=' + this.id)
              } else {
                navigator.pop()
              }
            })
          }
          this.loadData()
        })
      })
    },
    buyerReadClick () {
      navigator.push('webpage.js?code=SELLER_PROMOTION_ITEM_BUY_NOTICE')
    },
    share () {
      userLevel.checkPlus().done(rs => {
        navigator.push('commission-item-share.js?id=' + this.id)
      })
    }
  }
}
</script>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/icon";
  @import "./sass/floor";
  @import "./sass/utilities";
  @import "./sass/activeable";

  $padding-v: 20px;
  .container {
    background-color: $body-bg;
  }

  .text-locked {
    color: rgb(255, 255, 255);
  }

  .btn-locked {
    background-color: #979797;
  }
  .box {
    &-title {
      color: $color-primary;
      font-size: 30px;
      margin-bottom: 5px;
    }
    &-content {
      color: $color;
      font-size: 30px;
      margin-bottom: 40px;
    }
  }

  .item-guarantee-fee {
    font-size: 28px;
    color: $color;
    &-value {
      font-size: 34px;
      color: $color-primary;
    }
  }

  .shop-info {
    background-color: #FFFFFF;
    @include border-bottom(1, solid, #ddd);
    padding: 20px;
  }

  .item-price-row {
    background-color: #efefef;
  }

  .item-sale-price {
    color: $color-muted;
    font-size: 24px;
  }
  .item-rebate {
    color: $color-warning;
    font-size: 24px;
  }

  .item-zk {
    color: $color-primary;
    font-size: 24px;
  }

  .item-desc {
    &-cell {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      background-color: #FFFFFF;
      margin: 0 0 0 0;
      padding: 0 20px;
    }
    &-title {
      font-size: 28px;
      color: $color;
    }
    &-arrow {
      font-size: 28px;
      color: $color-muted;
    }
  }

  .remain-num {
    flex-direction: row;
    align-items: center;
    &-title {
      color: $color-muted;
      font-size: 24px;
    }
    &-value {
      color: $color-warning;
      font-size: 28px;
    }
  }

  .footerbar {
    $height: 96px;
    background-color: #ffffff;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    height: $height;
    box-shadow: 0 0 5px #bfbfbf;
    &-btn {
      flex: 1;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      &-icon {
        font-size: 50px;
        color: #ffffff;
      }
      &-favor {
        flex: 0;
        width: 100px;
        font-size: 60px;
        text-align: center;
        line-height: $height;
        color: $color-muted;
      }
      &-text {
        font-size: 32px;
        line-height: 32px;
        height: 32px;
        color: #ffffff;
      }
      &-price {
        margin-top: 5px;
        font-size: 24px;
        line-height: 24px;
        height: 24px;
        color: #ffffff;
      }
    }
  }

  .timecount-down-btn {
    background-color: #fdfacb;
  }

  .share-btn {
    background-color: #f6c54a;
  }

  .buy-btn {
    background-color: $brand-primary;
  }

  .bg-white {
    background-color: #ffffff;
  }

  .bg-muted {
    background-color: #FAFAFA;
  }

  .panel {
    margin-bottom: 10px;
    margin-top: 10px;
    &-body {
      padding: 20px;
    }
  }

  .favor-highlight {
    color: $color-primary;
  }

  .item-pic {
    width: 750px;
    height: 750px;
  }

  .item-img-slider {
    position: relative;
    height: 750px;
    width: 750px;
    &-indicator {
      height: 30px;
      item-color: white;
      item-selected-color: $color-primary;
      item-size: 15px;
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0
    }

  }

  .shop-title {
    color: #666;
    font-size: 28px;
    text-align: right;
    &-dp {
      font-size: 28px;
      color: $color-muted;
    }
  }

  .item-title {
    position: relative;
    margin-bottom: 20px;
    &-text {
      font-size: 32px;
      color: #000;
      line-height: 40px;
      lines: 2;
      text-overflow: ellipsis;
    }

    &-icon {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .item-detail-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .item-price {
    flex-direction: row;
    align-items: flex-end;
    &-y {
      font-size: 28px;
      color: $color-primary;
      line-height: 28px;
    }
    &-val {
      font-size: 44px;
      line-height: 44px;
      height: 44px;
      color: $color-primary;
    }
    &-origin {
      &-y {
        font-size: 24px;
        text-decoration: line-through;
        margin-left: 30px;
        color: $color-muted;
      }
      &-val {
        margin-left: 20px;
        font-size: 28px;
        text-decoration: line-through;
        color: $color-muted;
      }
    }
  }

  .item-plus-share-info {
    flex-direction: row;
    align-items: flex-end;
    &-title {
      font-size: 24px;
      color: $color-warning;
      font-weight: 100;
    }
    &-y {
      font-size: 28px;
      color: $color-warning;
    }
    &-value {
      font-size: 28px;
      color: $color-warning;
    }
  }

  .item-share-info {
    flex-direction: row;
    align-items: flex-end;
    &-title {
      font-size: 24px;
      color: #454545;
      font-weight: 100;
    }
    &-y {
      font-size: 28px;
      color: #454545;
    }
    &-value {
      font-size: 28px;
      color: #454545;
    }
  }

  .sales {
    flex-direction: row;
    align-items: flex-end;
    &-title {
      font-size: 24px;
      color: $color-muted;
      font-weight: 100;
    }
    &-val {
      font-size: 28px;
      color: $color-muted;
    }
  }
</style>
